<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-12-01 13:42:12
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-12-01 17:16:36
 * @FilePath: \school-shop-vue\pages\settings\secure.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />

    <view class="content-box">
      <view class="context">
        <view
          class="context-box flex-row-between"
          v-for="(item, index) in list"
          :key="index"
          @click="navTo(item)"
        >
          <span class="left">{{ item.name }}</span>
          <view class="flex-row-end">
            <span class="right" v-if="item.value">{{
              item.value | changeXingxing
            }}</span>
            <u-icon name="arrow-right" color="#999999" size="30"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["tel"]),
  },
  filters: {
    changeXingxing(value) {
      return value.substr(0, 3) + "****" + value.substr(7, 4);
    },
  },

  data() {
    return {
      config: {
        title: "账号安全",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },

      list: [
        {
          name: "修改密码",
          path: "/pages/settings/change_password",
        },
        {
          name: "修改手机号",
          value: "15800000000",
          path: "/pages/settings/change_phone",
        },
        {
          name: "微信绑定",
          type: "wx",
        },
        // {
        //   name: "新浪微博",
        //   path: "wb",
        // },
        // {
        //   name: "实名认证",
        //   path: "/pages/settings/real_name",
        // },
      ],
    };
  },
  onShow() {
    if (this.tel) {
      this.list[1].value = this.tel;
    }
  },
  methods: {
    navTo(item) {
      uni.navigateTo({
        url: item.path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
.content {
  width: 100%;

  &-box {
    width: 100%;
    padding: 20rpx;

    .context {
      width: 100%;
      padding: 0 30rpx;
      background: #fff;
      border-radius: 20rpx;
      &-box {
        height: 110rpx;
        line-height: 110rpx;
        border-bottom: 1rpx solid #ececec;
        align-items: center;
        &:nth-last-child(1) {
          border-bottom: none;
        }

        .left {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .right {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          margin-right: 10rpx;
        }
      }
    }
  }
}
/deep/.hx_font_size {
  font-weight: bold;
}
</style>